<template>
    <div id="app">
      <div class="header">
        <Header></Header>
      </div>
      <div class="main">
        <div class="main_bac">
          <div class="main_form">
              <div style=" margin-top: 20px;margin-right: 155px;width: 360px;height: 375px;background-color: white;float: right;border-radius: 5px">
                  <div class="login" style="margin-top: 25px">
                    <span style="font-size: 20px;margin-left: 150px;">登录</span>
                  </div>
                  <div class="user" style="margin-top: 20px;margin-left: 20px">
                    <span style="font-size: 15px;font-weight: bold">手机号：</span>
                    <Input  v-model="User.phone" icon="ios-person-outline" placeholder="请输入手机号" style="width: 250px;"></Input>
                  </div>
                  <div class="pwd" style="margin-top: 30px;margin-left: 20px">
                    <span style="font-size: 15px;font-weight: bold">验证码：</span>
                    <Input v-model="User.code" icon="ios-email-outline"  placeholder="请输入验证码" style="width: 134px"></Input>
                    <Button type="primary" style="margin-left: 20px" @click="getCode(User.phone)">获取验证码</Button>
                  </div>
                  <div class="login_btn">
                    <Button type="primary"  style="margin-left: 30px;width: 300px;height: 50px;margin-top: 50px;font-size: 20px" @click="login1()">登录</Button>
                  </div>
              </div>
          </div>
<!--          <div class="login-banner-brand">-->
<!--          </div>-->
        </div>
      </div>
      <div class="footer">
        <Footer></Footer>
      </div>
    </div>
</template>
<script>
    import Header from "../components/Header";
    import Footer from "../components/Footer";
    export default {
      name: "Login",
      data(){
        return{
          User: {},
        }
      },
      components:{
        Header,
        Footer
      },
      methods:{
        getCode(phone){
          let _this = this
          if(!this.User.phone){alert('请输入电话号码！');return false;}
          this.$axios.get("http://localhost:8089/user/sendMs/"+phone).then(function (res) {
            console.log("拿到验证嘛"+res.data)
            alert('验证码已发送');
          }).catch(function (err) {
              alert('发送失败');
          })
        },
        login1(){
          let _this = this
          if(!this.User.phone){alert('请输入电话号码！');return false;}
          if(!this.User.code){alert('请输入验证码!');return false;}
          this.$axios.post("http://localhost:8089/user/register",this.User).then(function (res) {
              alert("登陆成功！")
          }).catch(function (err) {
              alert('登录失败！')
          })

        },
      }
    }
</script>
<style scoped>
  .main_bac{
    width: 1518px;
    height: 600px;
    background-image: url("../assets/login_bac.jpg");
  }
  .login-banner-brand {
    width: 100%;
    position: relative;
    height: 100px;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #e9ebee;
    background: url();
    z-index: 14;
  }
</style>
